import React from 'react';
import style from './EditCanvas.module.scss'
import {Spin} from "antd";
import useGetComponentInfo from "../../../hooks/useGetComponentInfo";
import {changeSelectedId, ComponentsInfoTypes, moveComponent,} from "../../../redux/componentsReducer";
import {ComponentConfType, getComponentConByType} from "../../../components/QuestionComponents";
import {useDispatch} from "react-redux";
import classNames from "classnames";
import useBindCanvasKeyPress from "../../../hooks/useBindCanvasKeyPress";
import SortableContainer from "../../../components/DragSortable/SortableContainer";
import SortItems from "../../../components/DragSortable/SortItems";

type PropsType = {
  loading: boolean
}

//
function getComponent(componentInfo: ComponentsInfoTypes) {
  const {type, props} = componentInfo//从传入的组件信息中获取到type的props
  const componentConf = getComponentConByType(type) as ComponentConfType
  console.log('componentConf', componentConf)
  /**
   * {//根据getComponentConByType传入type获取到组件信息
   *     title: '输入框',
   *     type: 'questionInput',
   *     Component: Components,
   *     defaultProps: QuestionInputDefaultProps
   * }
   */
  if (componentConf === null) return null
  const {Component} = componentConf//获取到相应的组件
  return <Component {...props}/>
}

const EditCanvas: React.FC<PropsType> = (props: PropsType) => {
  const {loading} = props
  const dispatch = useDispatch()
  const {componentList, selectedId, selectedComponent} = useGetComponentInfo()//通过useHooks获取组件列表信息
  console.log('componentInfo', componentList)

  // 点击画布上的组件，修改selectedId
  function handleClick(e: React.MouseEvent<HTMLDivElement>, id: string) {
    e.stopPropagation()
    dispatch(changeSelectedId(id))
  }

  function handleOnDragEnd(oldIndex: number, newIndex: number) {
    console.log('oldIndex', oldIndex, 'newIndex', newIndex)
    dispatch(moveComponent({oldIndex, newIndex}))
  }

  // SortableContainer items属性需要有id属性
  const componentListWithId = componentList.map(item => {
    return {
      ...item,
      id: item.fe_id
    }
  })
  // 添加快捷键方式
  useBindCanvasKeyPress()
  if (loading) {
    return <div style={{textAlign: "center", marginTop: '50px'}}>
      <Spin/>
    </div>
  }
  return (
    <div className={style.canvas}>
      <SortableContainer onDragEnd={handleOnDragEnd} items={componentListWithId}>
        {
          // 遍历组件列表 通过getComponent返回相应的组件
          componentList.filter(c => !c.isHidden).map((item, index) => {
            const {fe_id, isLocked} = item
            const wrapperDefaultClassName = style['component-wrapper']
            const selectedClassName = style['selected']
            const lockedClassName = style['locked']
            const wrapperClassName = classNames({
              [wrapperDefaultClassName]: true,
              [selectedClassName]: fe_id === selectedId,
              [lockedClassName]: isLocked
            })
            return <SortItems id={fe_id} key={fe_id}>
              <div onClick={(e) => {
                handleClick(e, fe_id)
              }} className={wrapperClassName}>
                <div className={style.component}>
                  {getComponent(item)}
                </div>
              </div>
            </SortItems>
          })
        }
      </SortableContainer>

    </div>
  );
};

export default EditCanvas;
